<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="500px" :title="`新增商品`">
    <p></p>
    <el-form ref="ruleFormRef" label-width="150px" label-suffix=" :" :rules="rules" :model="goodsInfo">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="goodsInfo!.goodsName" placeholder="请填写商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="一级分类选择" prop="goodsList">
        <el-select v-model="goodsInfo!.listId" clearable>
          <el-option
            v-for="option in resultList"
            :key="option.listId"
            :label="option.listName"
            :value="option.listId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类选择" prop="goodsSet" :disabled="!isFirstLevelSelected">
        <el-select v-model="goodsInfo!.setId" clearable>
          <el-option v-for="option in resultSet" :key="option.setId" :label="option.setName" :value="option.setId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计量单位" prop="measureUnit">
        <el-input v-model="goodsInfo!.measureUnit" placeholder="请填写计量单位" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品原价" prop="goodsPrice">
        <el-input v-model="goodsInfo!.goodsPrice" placeholder="请填写商品原价" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品折扣" prop="goodsDiscount">
        <el-input v-model="goodsInfo!.goodsDiscount" placeholder="请填写商品折扣" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品成本" prop="goodsCost">
        <el-input v-model="goodsInfo!.goodsCost" placeholder="请填写商品成本" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品型号" prop="goodsModel">
        <el-input v-model="goodsInfo!.goodsModel" placeholder="请填写商品型号" clearable></el-input>
      </el-form-item>
      <el-form-item label="供应商名称" prop="vendorInfo.vendorName" style="display: flex; align-items: center">
        <el-input v-model="goodsInfo!.vendorInfo.vendorName" placeholder="请选择供应商" clearable style="flex: 1"></el-input>
        <el-button type="primary" @click="openVendorDialog">选择供应商</el-button>
      </el-form-item>
      <el-form-item label="商品保质期限" prop="goodsShelfLife">
        <el-date-picker
          v-model="goodsInfo!.goodsShelfLife"
          type="date"
          placeholder="请选择商品保质期限"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="可否退货" prop="optReturn">
        <el-select v-model="goodsInfo!.optReturn" placeholder="请选择是否可退货" clearable default-first-option>
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可否换货" prop="optReplace">
        <el-select v-model="goodsInfo!.optReplace" placeholder="请选择是否可换货" clearable>
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品备注信息" prop="goodsRemark">
        <el-input v-model="goodsInfo!.goodsRemark" placeholder="请填写商品备注信息" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
  <VendorDialog ref="vendorRef" @get-vendor="getVendor" />
</template>

<script setup lang="tsx" name="UserDrawer">
import { ref, reactive, onMounted, watch } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { addGoodsEntity, getGoodsList, getGoodsSet } from "@/api/modules/good";
import { Good, Vendor } from "@/api/interface";
import VendorDialog from "./VendorDialog.vue";
//import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

const rules = reactive({
  goodsName: [{ required: true, message: "请填写商品名称" }],
  measureUnit: [{ required: true, message: "请填写计量单位" }],
  goodsPrice: [{ required: true, message: "请填写商品原价" }],
  goodsDiscount: [{ required: true, message: "请填写商品折扣" }],
  goodsCost: [{ required: true, message: "请填写商品成本" }],
  goodsModel: [{ required: true, message: "请填写商品型号" }],
  "vendorInfo.vendorId": [{ required: true, message: "请填写供应商ID" }],
  "vendorInfo.vendorName": [{ required: true, message: "请填写供应商名称" }],
  goodsShelfLife: [{ required: true, message: "请选择商品保质期限" }],
  optReturn: [{ required: true, message: "请填写是否可退货" }],
  optReplace: [{ required: true, message: "请填写是否可换货" }],
  goodsRemark: [{ required: true, message: "请填写商品备注信息" }]
});

interface DrawerProps {
  title?: string;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerProps = ref<DrawerProps>({
  title: "新增客户"
});
const drawerVisible = ref(false);

const goodsInfo = ref<Partial<any>>({
  goodsName: "",
  listId: undefined,
  setId: undefined,
  measureUnit: "",
  goodsPrice: undefined,
  goodsDiscount: undefined,
  goodsCost: undefined,
  goodsModel: undefined,
  vendorInfo: {
    vendorId: -1,
    vendorName: ""
  },
  goodsShelfLife: new Date(),
  optReturn: 1,
  optReplace: 1,
  goodsRemark: undefined
});

const resultList = ref<Good.ReqGoodsList[]>();
const resultSet = ref<Good.ReqGoodsSet[]>();

onMounted(async () => {
  resultList.value = (await getGoodsList()).data;
});

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await addGoodsEntity(goodsInfo.value);
      console.log(goodsInfo.value);
      ElMessage.success({ message: `商品添加成功！` });
      drawerVisible.value = false;
      drawerProps.value.getTableList!();
    } catch (error) {
      console.log(error);
    }
  });
};

const isFirstLevelSelected = ref(false);
watch(
  () => goodsInfo.value.listId,
  () => {
    isFirstLevelSelected.value = goodsInfo.value.listId !== undefined;
  }
);

watch(
  () => goodsInfo.value.listId,
  async (newValue: number | undefined, oldValue: number | undefined) => {
    if (newValue !== undefined && newValue !== oldValue) {
      console.log(goodsInfo.value.listId);
      if (goodsInfo.value.listId) {
        resultSet.value = (await getGoodsSet({ listId: goodsInfo.value.listId })).data;
        isFirstLevelSelected.value = false;
      } else {
        resultSet.value = [];
        isFirstLevelSelected.value = true;
      }
    }
  }
);

const vendorRef = ref<InstanceType<typeof VendorDialog> | null>(null);
const openVendorDialog = () => {
  vendorRef.value?.open();
};

//获取子组件传来的分站信息
const getVendor = (row: Vendor.ReqVendorList) => {
  goodsInfo!.value.vendorInfo.vendorId = row.vendorId;
  goodsInfo!.value.vendorInfo.vendorName = row.vendorName;
};

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>
